<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        size="default"
        label-width="100px"
        style="width: 100%"
      >
        <el-col :span="12">
          <el-form-item label="网站状态" prop="status" required>
            <el-switch
              v-model="formData.status"
              active-text="启用"
              inactive-text="停用"
              inline-prompt
            ></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站点名称" prop="webName">
            <el-input
              v-model="formData.webName"
              type="text"
              placeholder="请输入站点名称"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站点域名" prop="webUrl">
            <el-input
              v-model="formData.webUrl"
              type="text"
              placeholder="请输入站点域名"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站点logo" prop="webLogo">
            <el-input
              v-model="formData.webLogo"
              type="text"
              placeholder="请输入站点logo"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站点关键字" prop="webKeys">
            <el-input
              v-model="formData.webKeys"
              type="text"
              placeholder="请输入站点关键字"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="网站描述" prop="webDescribe">
            <el-input
              v-model="formData.webDescribe"
              type="text"
              placeholder="请输入网站描述"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站长电话" prop="masterPhone">
            <el-input
              v-model="formData.masterPhone"
              placeholder="请输入手机号"
              :maxlength="11"
              show-word-limit
              clearable
              prefix-icon="Cellphone"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站长微信号" prop="masterWeixin">
            <el-input
              v-model="formData.masterWeixin"
              type="text"
              placeholder="请输入站长微信号"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="站长QQ号码" prop="masterQq">
            <el-input
              v-model="formData.masterQq"
              type="text"
              placeholder="请输入站长QQ号码"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="版权信息" prop="copyright">
            <el-input
              v-model="formData.copyright"
              type="text"
              placeholder="请输入版权信息"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备案信息" prop="filing">
            <el-input
              v-model="formData.filing"
              type="text"
              placeholder="请输入备案信息"
              clearable
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <!-- <el-button @click="resetForm">重置</el-button> -->
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script setup>
import {
  listConfig,
  getConfig,
  delConfig,
  addConfig,
  updateConfig,
} from "@/api/config/config"
import { getUserProfile } from "@/api/system/user"
import { onMounted, ref } from "vue"
const { proxy } = getCurrentInstance()
const formRef = ref()
const data = reactive({
  formData: {
    status: false,
    webName: undefined,
    webUrl: undefined,
    webLogo: undefined,
    webKeys: undefined,
    webDescribe: undefined,
    masterPhone: undefined,
    masterWeixin: undefined,
    masterQq: undefined,
    copyright: undefined,
    filing: undefined,
  },
  rules: {
    webName: [],
    webUrl: [],
    webLogo: [],
    webKeys: [],
    webDescribe: [],
    masterPhone: [
      {
        pattern: new RegExp(/^1(3|4|5|7|8|9)\d{9}$/),
        message: "手机号格式错误",
        trigger: "blur",
      },
    ],
    masterWeixin: [],
    masterQq: [],
    copyright: [],
    filing: [],
  },
})
const { formData, rules } = toRefs(data)

// 用户id
const userId = ref(null)
// 是否为第一次填写
const first = ref(null)

onMounted(async () => {
  const res = await getUserProfile()
  userId.value = res.data.userId
  getList()
})

// 获取系统配置
/** 查询系统功能列表 */
async function getList() {
  listConfig({ userId: userId.value }).then((response) => {
    formData.value = {
      ...response.rows[0],
      status: response.rows[0].status ? true : false,
    }
    if (response.rows.length == 0) {
      first.value = true
    } else {
      first.value = false
    }
  })
}

/**
 * @name: 表单提交
 * @description: 表单提交方法
 * @return {*}
 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (!valid) return
    proxy.$refs["formRef"].validate((valid) => {
      if (valid) {
        if (!first.value) {
          updateConfig({
            ...formData.value,
            status: formData.value.status ? 1 : 0,
            userId: userId.value,
          }).then((response) => {
            proxy.$modal.msgSuccess("修改成功")
            getList()
          })
        } else {
          addConfig({
            ...formData.value,
            status: formData.value.status ? 1 : 0,
            userId: userId.value,
          }).then((response) => {
            proxy.$modal.msgSuccess("新增成功")
            getList()
          })
        }
      }
    })
    // TODO 提交表单
  })
}
/**
 * @name: 表单重置
 * @description: 表单重置方法
 * @return {*}
 */
function resetForm() {
  formRef.value.resetFields()
}
</script>
<style></style>
